import QtQuick 1.1
import com.nokia.meego 1.0
import "Logic.js" as Logic

 Page {
     id: pageNetworkConnections
     objectName: "pageNetworkConnections"
     orientationLock: appWindow.lockOrientation()

     tools: ToolBarLayout {
         id: tool_network_connections
         visible: true
         ToolIcon {
             iconId: "toolbar-back";
             onClicked: {
                 cppNetStat.stopNetstat()
                 menuTypeConn.close()
                 pageStack.pop()
             }
         }
         ToolIcon {
             id: ti_updateConn
             objectName: "pB_updateConn"
             iconId: "toolbar-refresh"
             states: [
                 State {
                     name: "rotated"
                     PropertyChanges { target: ti_updateConn; rotation: 180; }
                 },
                 State {
                     name: "rotated_back"
                     PropertyChanges { target: ti_updateConn; rotation: 0; }
                 }
             ]
             transitions: Transition { RotationAnimation {duration: 700; direction: RotationAnimation.Counterclockwise} }
             onClicked: {
                 if ( (ti_updateConn.state == "rotated_back") || (ti_updateConn.state == "") ) {
                     ti_updateConn.state = "rotated"
                 } else {
                     ti_updateConn.state = "rotated_back"
                 }
                 cppNetStat.refreshData()
             }
         }
         ToolIcon {
             id: pB_resolveConn
             //objectName: "pB_resolveConn"
             iconId: "toolbar-tag"
             state: "not_resolve"
             states: [
                 State {
                     name: "not_resolve"
                     PropertyChanges { target: pB_resolveConn; rotation: 0; }
                 },
                 State {
                     name: "resolve"
                     PropertyChanges { target: pB_resolveConn; rotation: 90; }
                 }
             ]
             transitions: Transition { RotationAnimation {duration: 700;} }
             onClicked: {
                 if ( pB_resolveConn.state == "not_resolve" ) {
                     pB_resolveConn.state = "resolve"
                     cppNetStat.resolveOnOff( true )
                 } else {
                     pB_resolveConn.state = "not_resolve"
                     cppNetStat.resolveOnOff( false )
                 }
             }
         }
         ToolIcon {
             id: ti_menuTCPandUDP
             iconId: "toolbar-view-menu"
             anchors.right: parent === undefined ? undefined : parent.right
             onClicked: ( menuTypeConn.status == DialogStatus.Closed) ? menuTypeConn.open() : menuTypeConn.close()
         }
     }

     Menu {
         id: menuTypeConn
         MenuLayout {
             MenuItem {
                 id: menuItemViewTCP
                 text: qsTr("TCP connections");
                 onClicked: {
                     titlePage.text = qsTr("Network connections (TCP)")
                     cppNetStat.tcpView()
                 }
             }
             MenuItem {
                 id: menuItemViewUDP
                 text: qsTr("UDP connections");
                 onClicked: {
                     titlePage.text = qsTr("Network connections (UDP)")
                     cppNetStat.udpView()
                 }
             }
             /*MenuItem {
                 id: menuItemHelp
                 text: qsTr("Help");
                 onClicked: {
                     dlgHelp.open()
                 }
             }*/
         }
     }
     //=================================
     function disabledWhenUpdate() {
         ti_updateConn.enabled = false
         pB_resolveConn.enabled = false
         menuItemViewTCP.enabled = false
         menuItemViewUDP.enabled = false
     }

     function enabledAfterUpdate() {
         ti_updateConn.enabled = true
         pB_resolveConn.enabled = true
         menuItemViewTCP.enabled = true
         menuItemViewUDP.enabled = true
     }

     //=================================

     /*QueryDialog {
         id: dlgHelp
         icon: "image://theme/icon-l-user-guide"
         message: qsTr( "Here you can see the status of network connections that are running on your device with various applications.\n" +
                       "If you have activated \"developer mode\", you will see more information about each connection.");
         buttons: Button {
             text: "Ok"
             onClicked: dlgHelp.close()
             platformStyle: ButtonStyle { inverted: true }
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }*/

     //--------------------------------------------
     QNMTitle {
         id: titlePage
         width: parent.width
         height: mytheme.pageTitleAreaHeight
         text: qsTr("Network connections (TCP)")
         image: "./pictures/connections.png"
     }

     BackgroundPage { }
     //=================================


     //call from python code
     function showBanner() {
         lockToolWhenUpdate( false ) //блокировка органов управления
         titlePage.busy = true
         lockScreen.state = "visible"
     }

     function hideBanner() {
         lockToolWhenUpdate( true ) //разблокировка органов управления
         titlePage.busy = false
         lockScreen.state = "not_visible"
     }

     function lockToolWhenUpdate( isLock ) {
         ti_updateConn.enabled = isLock
         pB_resolveConn.enabled = isLock
         ti_menuTCPandUDP.enabled = isLock

         ti_updateConn.opacity = ( isLock === true ) ? 1 : 0.4
         pB_resolveConn.opacity = ( isLock === true ) ? 1 : 0.4
         ti_menuTCPandUDP.opacity = ( isLock === true ) ? 1 : 0.4
     }

     Rectangle {
         id: lockScreen
         z: 2
         anchors.top: titlePage.bottom
         anchors.bottom: parent.bottom
         width: parent.width
         height: parent.height - titlePage.height
         color: "black"

         Label {
             id: lblPleaseWait
             text: qsTr("Please, wait...")
             anchors.horizontalCenter: parent.horizontalCenter
             y: -100
             color: "white"
             Behavior on y { SpringAnimation { spring: 3; damping: 0.1 } }
         }
         states: [
             State {
                 name: "not_visible"
                 PropertyChanges { target: lockScreen; opacity: 0; }
                 PropertyChanges { target: lblPleaseWait; y: -100; }
             },
             State {
                 name: "visible"
                 PropertyChanges { target: lockScreen; opacity: 0.8; }
                 PropertyChanges { target: lblPleaseWait; y: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 100 : 200; }
             }
         ]
         transitions: Transition { NumberAnimation { properties: "opacity"; duration: 400 } }

         MouseArea {
             anchors.fill: parent
             onClicked: {}
             onPressed: {}
             onReleased: {}
         }
     }

     //=================================

     // Delegate for the recipes.  This delegate has two modes:
     // 1. List mode (default), which just shows the picture and title of the recipe.
     // 2. Details mode, which also shows the ingredients and method.

     Component {
         id: itemDelegate

         Item {
             id: recipe
             //smooth: true

             property real detailsOpacity : 0

             function getStrDescr() {
                 var value = "<html><b>" + qsTr("Local address:")+"</b><br/>"+nsLAddr+" : "+nsLPort+"<br/>";
                 if ( nsFAddr !== "" )
                     value += "<b>"+qsTr("Foreign address:")+"</b><br/>"+nsFAddr+" : "+nsFPort + "<br/>";
                 value += "<br/>";
                 if ( nsPid !== "" )
                     value += "<b>"+qsTr("PID:")+"&nbsp;</b>" + nsPid + "<br/>";
                 if ( nsProcPath !== "" )
                     value += "<b>"+qsTr("Process:") + "</b>&nbsp;" + nsProcName + "<br/>" + nsProcPath + "<br/>";
                 value += "<b>" + qsTr("Netstate:") + "&nbsp;</b>" + nsState + "<br/>";
                 value += "<br/>" + nsLDescr +"</html>";
                 return value;
             }

             function getStrTitleItem() {
                 var title = "<html>"

                 if ( nsProcName !== "" ) {
                     title += "<b>"+nsProcName + "</b>"
                     if (screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted")
                         title += ": "
                     else
                         title += "<br/>"
                 }

                 if (nsSDescr !== "") {
                     title += nsSDescr
                 } else {
                     title += qsTr("UDP connection")
                 }
                 title += "</html>"
                 return title
             } //function getStrTitleItem()

             function getStrSubtitleItem() {
                 var subtitle = ""
                 if ( nsSDescr === "" ) { //UDP
                     subtitle +=nsLAddr + " : " + nsLPort
                     return subtitle
                 }

                 if ( nsFAddr !== "") {
                     subtitle += nsFAddr + " : " + nsFPort
                 } else if ( nsState == "LISTEN" ) {
                     subtitle += nsLAddr + " : " + nsLPort
                 }
                 return subtitle
             }

             width: listView.width
             //height: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 90 : 120
             height: 90

             // A simple rounded rectangle for the background
             Rectangle {
                 id: background
                 x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                 border.color: mytheme.pageTitleAreaColor
                 radius: 10
                 gradient: Gradient {
                     GradientStop { position: 0; color: mytheme.grColor2 }
                     GradientStop { position: 1; color: mytheme.grColor3 }
                 }
             }

             MouseArea {
                 anchors.fill: parent
                 onClicked: {
                     lockToolWhenUpdate( false )
                     recipe.state = 'Details'
                 }
             }

             Row {
                 id: topLayout
                 x: 15; y: 5;  height: imgItem.height; width: parent.width
                 spacing: 20

                 Image {
                     anchors.verticalCenter: parent.verticalCenter
                     id: imgItem
                     width: 80; height: 80
                     source: nsPicture
                     smooth: false //??? если картинка будет на 80х80 то будет не красивая :(
                 }
                 Column {
                     spacing: 7
                     anchors.verticalCenter: topLayout.verticalCenter
                     clip: true
                     Text {
                         text: getStrTitleItem()
                         font.pointSize: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 16 : 14
                         opacity: 1-recipe.detailsOpacity
                         color: mytheme.fontMainColor
                     }
                     Text {
                         text: getStrSubtitleItem()
                         font.pointSize: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 16 : 14
                         opacity: 1-recipe.detailsOpacity
                         color: mytheme.fontMainColor
                     }
                 }
             }

             Item {
                 id: details
                 x: 10; width: parent.width - 20
                 anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                 opacity: recipe.detailsOpacity

                 Text {
                     id: descrTitle
                     anchors.top: parent.top
                     text: qsTr("Description")
                     font.pointSize: 18
                     font.bold: true
                     color: mytheme.fontMainColor
                 }

                 Flickable {
                     id: flick
                     width: parent.width
                     anchors { top: descrTitle.bottom; bottom: parent.bottom }
                     contentHeight: descrText.height
                     clip: true

                     Text {
                         id: descrText
                         text: recipe.getStrDescr()
                         font.pointSize: 16
                         wrapMode: Text.WordWrap
                         width: details.width
                         color: mytheme.fontMainColor
                     }
                 }

             }

             // A button to close the detailed view, i.e. set the state back to default ('').
             MyButton {
                 id: buttonCloseDetail
                 height: 90
                 width: 200
                 y: 15
                 anchors {
                     right: background.right;
                     rightMargin: 10
                     //verticalCenter: imgItem.verticalCenter
                 }
                 opacity: recipe.detailsOpacity
                 label: qsTr("Close")
                 labelSize: 20

                 onButtonClick: {
                     recipe.state = "";
                     lockToolWhenUpdate( true )
                 }
             }

             states: [
                 State {
                     name: "Details"
                     PropertyChanges { target: imgItem; width: 100; height: 100 }
                     PropertyChanges { target: imgItem; smooth: true }
                     PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 }
                     PropertyChanges { target: recipe; height: listView.height }

                     // Move the list so that this item is at the top.
                     PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

                     // Disallow flicking while we're in detailed view
                     PropertyChanges { target: recipe.ListView.view; interactive: false }
                 },
                 State {
                     name: ""
                 }
             ]

             transitions: Transition {
                 NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                 //ParallelAnimation {
                 //    ColorAnimation { property: "color"; duration: 400 }
                 //    NumberAnimation { duration: 400; properties: "detailsOpacity,x,contentY,height,width" }
                 //}
             }
         }
     }

     // The actual list
     ListView {
         id: listView
         anchors.top: titlePage.bottom
         model: cppNetStatListModel
         delegate: itemDelegate
         height: parent.height - titlePage.height
         width: parent.width
     }

     ScrollDecorator {
         flickableItem: listView
     }


 }
